前言

Hi，我是 Ted !
進入 SEO 領域超過五年，接觸過許多產業、不同類型的客戶，眾多的專案下累積了豐富的經驗。
我發現在數位行銷這一塊，要有效的協助客戶、推進事項，越來越需要跨領域的技能。
以前中後來看，從一開始了解客戶產品定位、訪談需求、競品分析，到搭配客戶行銷活動作策略規劃，以及後續流量導入，登陸頁改善、路徑優化等。一連串 PDCA 的過程，以不單單像早期對於 SEO 工作的想像。

在專案的進程中，要如何引導客戶、滿足客戶的需求，順利推動事情 ?
我決定從 UI 設計入門學習，期待透過 30 天的鐵人賽，快速建立架構，作為後續跨領域的溝通與合作。

本篇重點

• 什麼是 UI 設計 ?
• 一般開發流程有什麼環節 ?
• 以介面設計工作範疇來說，會遇到什麼哪些職稱的人 ?
• 設計規範，協同合作的共同語言
• 設計流程有那些環節 ?

什麼是 UI 設計 ?

使用者介面 ( User Interface )，現在多指數位裝置的產品介面

目的是要使用者與其互動時，能順利完成任務。

對於新手，透過簡單的定義，可以思考的點有：

• 在網頁設計中，不同的行動裝置，應有不同的設計考量 ( 例如：桌機、平版 )
• 不同的系統，須注意設計上的差異 ( 例如：iOS、Android )
• 在每個互動中，背後想要傳遞的訊息或要完成的操作目標是什麼

一般開發流程有什麼環節 ?

了解產品開發的階段流程，可以粗略知道，在每個環節中，相對應的事情會是什麼。進而有方向構思能得到有效回答的問題，溝通才會到位順利。

1. Research ( 研究探索 ) -> 產出：產業背景研究、競業分析、人物訪談
2. Synthesis & Ideation ( 創意發想 ) -> 探討使用者真正的痛點，產出：人物誌、使用者旅程、心智地圖
3. Prototyping & Design ( 設計迭代 ) -> loop的運作方式，使用線框圖，確認資訊架構與任務流程，再繪製介面，產出：資訊架構、介面流程、線框稿、原型設計 (確認產品概念是否符合使用者需求)、視覺設計
4. Implementation ( 執行應用 ) -> 依設計規範，效能與程度的考量，產出：程式撰寫

會遇到哪些人 ?

依開發流程，各階段可能會參與的團隊成員

• 研究：使用者研究員、使用者體驗設計師
• 發想：使用者研究員、使用者介面設計師、使用者體驗設計師
• 設計：視覺設計師、原型設計師 ( 精稿完成後，製作能互動的原型 )、使用者介面設計師、使用者體驗設計師、網頁設計師 ( 網頁頁面、網頁切版 )
• 執行：前端工程師 ( 版面、動畫 )、網頁設計師 ( 網頁頁面、網頁切版 )

新手必看的設計規範

以網站開發、行銷頁面製作為例，不同的設計師與團隊成員，可能就會對同一個顏色有不同認知的情況，因此，設計規範的目的，在於讓大家有依循的準則，可以有共同語言進行溝通 ( 例如：原生物件的名稱 )

統一設計調性、提升工作效率、優化細節體驗

• Google：Material Design
• Apple：Human Interface Guideline

設計流程有那些環節 ?

設計流程主要橫跨 "創意發想" 和 "設計迭代"，有六個階段：

• IA ( 資訊架構 )
  • User Story ( 使用者故事 )
• Functional Map ( 功能圖表 )
• Logic Flow ( 邏輯流程 )
  • Flow Chart ( 流程圖 ) -> 以上多為使用者體驗設計師
  • UI Flow ( 介面流程 ) -> 這邊開始多為使用者介面設計師
• Wireframe ( 線框圖稿 )
• Mockup ( 設計精稿 )
• Prototype ( 互動原型 )

接下來，會依序介紹，再正式進入繪製之前的四個階段： IA -> Functional Map -> Logic Flow -> Wireframe

什麼是UI設計?(文章同步更新於泰德觀點 Ted's Point)